import React, { PureComponent } from 'react';
import { Link } from 'dva/router'; 
import {
  Card,
  Table,
  Divider,
  Tag,
  Popconfirm,
  Form,
  Row,
  Col,
  Button,
  Input,
  Cascader,
  Badge,
  Modal,
  Select
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; 
import styles from '../People/People.less';
import ListModal from './ListModal'; //修改模态框
import axios from 'axios';
import { connect } from 'dva';
const FormItem = Form.Item;
const Option=Select.Option;
 @connect(({ users, loading }) => ({
   users:users.currentUsers,
   usersLoading: loading.effects['users/getUserslist'],
 }))
@Form.create()
export default class Userslist extends PureComponent {
  state = { visible: false };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'users/getUserslist',
    });
  }
  handleSearch = e => {
    //表单条件查询
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };
      this.setState({
        formValues: values,
      });
      console.log(values);
      dispatch({
        type: 'users/fetch',
        payload: values,
      });
    });
  };
  //表单重置
  handleFormReset = () => {
    //表单重置
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'users/fetch',
      payload: {},
    });
  };
  //新增用户
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'users/create',
          payload: values,
        });
      }
    });
  };
  //重置密码
  resetHandler = (id,account,role) => {
  const { dispatch } = this.props;
   const values ={"account":account,"password":"admin","role":role}
    dispatch({
      type: 'users/reset',
      payload: {id,values}
    }); 

  };
  //删除用户
  deleteHandler = id => {
    const { dispatch } = this.props;
      dispatch({
        type: 'users/remove',
        payload: id,
      }); 
  
    };
   editHandler = (id, values) => {
      //修改人员记录
      const { dispatch } = this.props;
      dispatch({
        type: 'users/update',
        payload: { id, values },
      });
    };
  render() {
    const {users,usersLoading}=this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const columns = [{
      title: '系统登录账号',
      dataIndex: 'account',
      key: 'account',
      render: text => <a href="javascript:;">{text}</a>,
    }, {
      title: '账号角色',
      dataIndex: 'role',
      key: 'role',
    }, {
      title: '账号密码',
      dataIndex: 'password',
      key: 'password',
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
            <Popconfirm title="确定重置密码？" onConfirm={this.resetHandler.bind(null, record.id,record.account,record.role)}>
              <a href="">重置密码</a>
            </Popconfirm>
           <Divider type="vertical" />
           <ListModal record={record} onOk={this.editHandler.bind(null, record.id)}>
              <a>修改</a>
            </ListModal>
          <Divider type="vertical" />
          <Popconfirm title="确定要删除吗？" onConfirm={this.deleteHandler.bind(null, record.id)}>
              <a href="">删除</a>
            </Popconfirm>
        </span>
      ),
    }];
    return (
      <PageHeaderLayout
        title="系统用户管理"
        content="系统用户管理用于收集用户信息，用户列表页是数据项基本的全面信息场景。"
      >
        <Card bordered={false}>
          <div
                className={styles.tableListForm}
                style={{ backgroundColor: '#EDF1F3', width: '100%' }}
                  >
                <Form onSubmit={this.handleSearch} layout="inline">
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={8} sm={24} className={styles.tableListFormLable}>
                      <FormItem label="登录账号">
                        {getFieldDecorator('account')(<Input placeholder="请输入" />)}
                      </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                      <FormItem label="账户角色">
                        {getFieldDecorator('role')(<Select placeholder="选择用户角色">
                                                      <Option value="普通用户">普通用户</Option>
                                                      <Option value="普通管理员">普通管理员</Option>
                                                      <Option value="超级管理员">超级管理员</Option>
                                                    </Select>)}
                      </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                      <span className={styles.submitButtons} style={{ float: 'right' }}>
                        <Button
                          type="primary"
                          htmlType="submit"
                          style={{ width: 82, height: 32, backgroundColor: '#1772c3' }}
                          onClick={this.handleSearch}
                        >
                          查询
                        </Button>
                        <Button
                          style={{ marginLeft: 20, width: 82, height: 32 }}
                          onClick={this.handleFormReset}
                        >
                          重置
                        </Button>
                      </span>
                    </Col>
                  </Row>
                </Form>
              </div>
              <div  className={styles.tables}>
                   <Button
                            icon="plus"
                            type="primary"
                            style={{ marginTop:'20px',backgroundColor: '#1772c3'}}
                          >
                          <Link style={{color:'#fff'}} to={'/users/usersadd'}>新建用户</Link>
                  </Button>
                   <Table 
                   columns={columns} 
                   dataSource={users} 
                   rowKey='id' 
                   loading={usersLoading}
                   pagination={{
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSize: 5, //每页5条数据
                    total: users.total,
                    showTotal: total => `共 ${total} 条数据`,
                  }} />
              </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
